<template>
	<view class="" style="height: 840rpx;display: flex;flex-direction:column;">
		<view class="bg-color" style="flex: 1;height:100rpx;width:100%;position: absolute;top: 0;">
			<label :class="{'om-color':currentTab == 0}"  @click="changCurrentIndex(0)" class="padding " style="display:inline-block;height:100%;">
				{{value}}
			</label>
			<label :class="{'om-color':currentTab == 1}" @click="changCurrentIndex(1)" class="padding " style="display:inline-block;height:100%; ">
				{{(selectList.length && (showTow || selectList[this.selectIndex].attr[showDetailTwo])) || '无'}}
			</label>
			<label  @click="cancel" class="lable-cancel padding-left padding-right " style="display:inline-block;height:100%; line-height:100rpx;">
				取消
			</label>
			<label  @click="confirm" class="lable-confirm padding-left padding-right om-color" style="display:inline-block;height:100%; line-height:100rpx;">
				确定
			</label>
		</view>
		<view class="" style="flex: 1;width:100%;height:750rpx;position:absolute;bottom: 0;margin-top: 0;">
			<view v-if="currentTab == 0" class="">
				<om-dpicker  :showHoliday="false"  @dateClick="dateClick" :show="isShowPikcer" :type="'date'" :value="value" :show-tips="true"
				  @confirm="onSelected" @cancel="onSelected"/>
			</view>
			<view v-if="currentTab == 1" class="bg-color">
				<picker-view  :value="[selectIndex]" @change="bindChange" class="picker-view" :indicator-style="'height: 100rpx;'">
					<picker-view-column>
					     <view  class="item" v-for="(item,index) in selectList" :key="index">{{item.attr[showDetailOne]+' '+(item.attr[showDetailTwo]?item.attr[showDetailTwo]:'无')}}</view>
					 </picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from '@/static/js/moment.js'
	
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${'2021'}-${'03'}-${'01'}`;
	}
	export default{
		name:"OmPicker",
		props:{
			dataList:{
				type:[Object,Array],
				default:{}
			},
			showDetailOne:{
				type:String,
				default:''
			},
			showDetailTwo:{
				type:String,
				default:''
			},
			initIndex:{
				type:Number,
				default:0
			},
			initValue:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				vTabs:[
				{
					name: '未完成',
				},
				{
					name: '待评价',
				}
			],
			selectList:[],
			currentTab:0,
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
			time: '12:01',
			showPicker: false,
			date1: '2019/01/01',
			time1: '15:00:12',
			datetime: '2019/01/01 15:00:12',
			range: ['2019/01/01', '2019/01/06'],
			rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
			type: 'rangetime',
			value: '',
			selectIndex:0,
			showTow:'',
			}
		},
		computed:{
			isShowPikcer(){
				if(this.currentTab == 0){
					return true
				}else{
					return false
				}
			}
		},
		methods:{
			bindChange(e){
				this.selectIndex = e.detail.value[0]
				this.showTow  = this.selectList[e.detail.value[0]].attr[this.showDetailTwo]
			},
			confirm(){
				this.$emit("confirm",this.selectList[this.selectIndex],this.value)
			},
			cancel(){
				this.$emit('cancel')
			},
			changCurrentIndex(index){
				if(index == 0){
					this.onShowDatePicker('date',this.value)
					this.showPicker = true
				}else{
					this.showPicker = false
				}
				this.currentTab = index;
			},
			dateClick(date){
				this.value = moment(date).format("YYYY-MM-DD");
				this.currentTab = 1
			},
			onShowDatePicker(type,date){//显示
			               this.type = type;
			               this.value = date
			           },
		   onSelected(e) {//选择
			   this.showPicker = false;
			   if(e) {
				   this[this.type] = e.value; 
				   //选择的值
				   console.log('value => '+ e.value);
				   //原始的Date对象
				   console.log('date => ' + e.date);
			     } 
			},
		},
		watch:{
			dataList:{
				handler(newVla,oldVla){
					this.selectList = newVla
				},
				immediate: true
			},
			initIndex:{
				handler(newVla,oldVla){
					this.selectIndex = newVla
				},
				immediate: true
			},
			initValue:{
				handler(newVla,oldVla){
					if(newVla){
						this.value = newVla.split(" ")[0]
						this.showTow = newVla.split(" ")[1]
						for(let index in this.selectList){
							if(this.selectList[index].attr[this.showDetailTwo] == newVla.split(" ")[1]){
								this.selectIndex = Number(index)
							}
						}
					}
				},
				immediate: true
			}
		},
		mounted() {
			this.onShowDatePicker('date',moment().format('YYYY-MM-DD'))
		}
	}
</script>

<style scoped>
	.bg-color{
		background-color:white;
	}
	.lable-confirm{
		position: absolute;
		right: 0;
	}
	.lable-cancel{
		position: absolute;
		right: 60px;
		color: #7A7E83;
	}
	  .picker-view {
	         width: 750rpx;
	         height: 750rpx;
	     }
	     .item {
	         height: 100rpx;
			 line-height: 100rpx;
	         align-items: center;
	         justify-content: center;
	         text-align: center;
	     }
</style>                                                  
